<template>
	<view>
		<!-- 详细信息组 -->
		<view class="flex flex-column align-center">
			<!-- 商品图片 -->
			<view class="flex flex-column align-center justify-center mt-4" style="height: 150rpx;">
				<text class="h3 font-weight-bold">{{incomeData.Order_Type=='0'?'':'-'}}￥{{money}}</text>
				<text class="font-sm">{{incomeData.Order_Type=='0'?'余额充值':'余额支付'}}</text>
			</view>
			<view class="flex flex-column align-center w-100" style="justify-content: space-evenly;">
				<!-- 交易类型 -->
				<view class="flex justify-between mt-2" style="width: 80%;">
					<text class="font-sm font-weight-bold">交易类型:</text>
					<text class="font-small">{{incomeData.Order_Type=='0'?'收入':'支出'}}</text>
				</view>
				<!-- 交易时间 -->
				<view class="flex justify-between mt-2" style="width: 80%;">
					<text class="font-sm font-weight-bold">交易时间:</text>
					<text class="font-small">{{incomeData.Collection_Date}}</text>
				</view>
				<!-- 流水单号 -->
				<view class="flex justify-between mt-2" style="width: 80%;">
					<text class="font-sm font-weight-bold">流水单号:</text>
					<text class="font-small">{{incomeData.Collection_SerialNumber}}</text>
				</view>
				<!-- 备注 -->
				<view class="flex justify-between mt-2" style="width: 80%;">
					<text class="font-sm font-weight-bold">备注:</text>
					<text class="font-small">{{incomeData.Order_Type=='0'?'微信支付':'余额支付'}}</text>
				</view>
				<!-- 交易详情 -->
				<view class="flex justify-between mt-2" style="width: 80%;">
					<text class="font-sm font-weight-bold">交易详情:</text>
					<text class="font-small">点击查看></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				incomeData:{},
				money:''
			}
		},
		methods: {
			accAdd(arg1, arg2) {	//浮点型相加
				var r1, r2, m;
				try {r1 = arg1.toString().split(".")[1].length} catch (e) {r1 = 0}
				try {r2 = arg2.toString().split(".")[1].length} catch (e) {r2 = 0}
				m = Math.pow(10, Math.max(r1, r2))
				return (arg1 * m + arg2 * m) / m
			},
		},
		onLoad(e) {
			this.incomeData = JSON.parse(decodeURIComponent(e.BalanceData))
			console.log(this.incomeData)
			this.money = this.accAdd(this.incomeData.Prepayment_Sales,this.incomeData.Gift_Sales)
		}
	}
</script>

<style lang="scss">
	@mixin flex {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
	}

	@mixin height {
		/* #ifndef APP-NVUE */
		height: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		flex: 1;
		/* #endif */
	}

	.box {
		@include flex;
	}

	.button {
		@include flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		height: 35px;
		margin: 0 5px;
		border-radius: 5px;
	}

	.example-body {
		background-color: #fff;
		padding: 10px 0;
	}

	.button-text {
		color: #fff;
		font-size: 12px;
	}

	.popup-content {
		@include flex;
		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 50px;
		background-color: #fff;
	}

	.popup-height {
		@include height;
		width: 200px;
	}

	.text {
		font-size: 12px;
		color: #333;
	}

	.popup-success {
		color: #fff;
		background-color: #e1f3d8;
	}

	.popup-warn {
		color: #fff;
		background-color: #faecd8;
	}

	.popup-error {
		color: #fff;
		background-color: #fde2e2;
	}

	.popup-info {
		color: #fff;
		background-color: #f2f6fc;
	}

	.success-text {
		color: #09bb07;
	}

	.warn-text {
		color: #e6a23c;
	}

	.error-text {
		color: #f56c6c;
	}

	.info-text {
		color: #909399;
	}

	.dialog,
	.share {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
	}

	.dialog-box {
		padding: 10px;
	}

	.dialog .button,
	.share .button {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		margin: 0;
		margin-top: 10px;
		padding: 3px 0;
		flex: 1;
	}

	.dialog-text {
		font-size: 14px;
		color: #333;
	}
</style>